/**
 * /*
* @author  ywx620
* @created 2023-12-12
tiny API 短API在4717行可查到
 * Graphics的缩写方法
方法	名称	描述
mt	    moveTo	移动到指定点
lt	    lineTo	画一条线到指定点
a/at	arc/arcTo	画一条弧线或弧段
bt	    bezierCurveTo	画一条二次贝塞尔曲线
qt	    quadraticCurveTo	画一条二次贝塞尔曲线（也称为 curveTo）
rect	rect	画一个矩形
cp	    closePath	闭合当前路径
c	    clear	清除当前路径
f	    beginFill	开始填充
if	    beginLinearGradientFill	开始线性渐变填充
rf	    beginRadialGradientFill	开始径向渐变填充
bf	    beginBitmapFill	开始位图填充
ef	    endFill	结束填充
ss/sd	setStrokeStyle/setStrokeDash	设置描边样式/设置描边虚线
s	    beginStroke	开始描边
is	    beginLinearGradientStroke	开始线性渐变描边
rs	    beginRadialGradientStroke	开始径向渐变描边
bs	    beginBitmapStroke	开始位图描边
es	    endStroke	结束描边
dr	    drawRect	画一个矩形
dc	    drawCircle	画一个圆
de	    drawEllipse	画一个椭圆
dp	    drawPolyStar	画一个多边形星形
rr      drawRoundRect   画一个带圆角的矩形（四个角一起控制）
rc      drawRoundRectComplex  画一个带圆角的矩形（四个角角分别控制）
p	    decodePath	解码路径
//初始使用
const [width,height]=[window.innerWidth-5,window.innerHeight-5]
createjs.Ticker.framerate = 30;
var canvas=document.createElement('canvas');
[canvas.width,canvas.height]=[width,height];
document.body.appendChild(canvas);
var stage=new createjs.Stage(canvas);
createjs.Ticker.addEventListener("tick",(e)=>{stage.update();});
*/
(createjs.Graphics.Dash = function(instr) {
	if (instr == null) { instr = [0]; }
	this.instr = instr;
}).prototype.exec = function(ctx) { 
	ctx.setLineDash(this.instr);
};
(createjs.Graphics.Polygon = function(x, y, points) {
    this.x = x;
    this.y = y;
    this.points = points;
}).prototype.exec = function(ctx) {
    var start = this.points[0];
    ctx.moveTo(start.x, start.y);
    this.points.slice(1).forEach(function(point) {
        ctx.lineTo(point.x, point.y);
    });
    ctx.lineTo(start.x, start.y);
}

/***
 *  var shape = new createjs.Shape()
    shape.graphics.s("#f00").dash([10,5]).dr(10,10,40,40)
 */
//画虚线
createjs.Graphics.prototype.dash = function(instr) {   
	return this.append(new createjs.Graphics.Dash(instr));
}
/**画多边形例子
    var shape = new createjs.Shape();
    shape.graphics.beginFill("red").drawPolygon(10,10,100,0,100,100,50,50)
    shape.x=shape.y=100;
*/
//画多边形
createjs.Graphics.prototype.drawPolygon = function(args) {
    var points = [];
    if (Array.isArray(args)) {
        args.forEach(function(point) {
            point = Array.isArray(point) ? {x:point[0], y:point[1]} : point;
            points.push(point);
        });
    } else {
        args = Array.prototype.slice.call(arguments).slice(0);
        var x = null;
        console.log(args)
        args.forEach(function(val) {
            if (x == null) {
                x = val;
            } else {
                points.push({x: x, y: val});
                x = null;
            }
        });
    }
    return this.append(new createjs.Graphics.Polygon(0, 0, points));
}
//计算角度转正，指最上面的一条边是水平的
var moonCountAngle=(sides)=>{
    let angle=0;
    if(sides/2%2==0){//边数一半为偶数的情况下需要转正的调整
        angle=180/sides;
    }else if(sides%2!=0){//边数为奇数的情况下需要转正的调整
        angle=90/sides;
        if((sides-3)/2%2==0)angle+=180;
    }
    return angle;
}
/**画多边形
 * isTurn是否需要转正
*/
var moonPolygon = ({radius=60,sides=8,color='red',isTurn=true},sideOut=null)=> {
    let shape = new createjs.Shape();
    shape.graphics.beginFill(color);
    let angle=0;
    if(isTurn){//转正则是最上的一条边是水平的
        angle=moonCountAngle(sides);
    }
    if(sideOut){
        shape.graphics.s(sideOut.color||'#000');
        shape.graphics.ss(sideOut.width||1)
    }
    shape.graphics.drawPolyStar(0, 0, radius, sides, 0, angle);
    return shape;
}
/**画花朵
 *r1花蕊半径，r2花瓣半径 ，r3花蕊到花瓣的距离，sides花瓣数量
 *isTurn是否需要转正
 */
var moonFlower=({r1=30,c1='yellow',r2=20,c2='red',r3=30,sides=5,isTurn=true},sideOut=null)=> {
    let shape = new createjs.Shape();
    if(sideOut){
        shape.graphics.s(sideOut.color||'#000');
        shape.graphics.ss(sideOut.width||1)
    }
    let angle=0;
    if(isTurn){//转正则是最上的一条边是水平的
        angle=moonCountAngle(sides);
        angle=angle*Math.PI/180;//转为弧度
    }
    for(let i=0;i<sides;i++){
        let x=r3*Math.cos(i*2*Math.PI/sides+angle);
        let y=r3*Math.sin(i*2*Math.PI/sides+angle);
        shape.graphics.f(c2).dc(x, y, r2);
    }
    shape.graphics.f(c1).dc(0, 0, r1);
    return shape;
}
//画田字形
/**colOut边的颜色,colIn十字的颜色,lineWidth线宽 */
var moonTian=(w=50,h=50,colOut="#666666",colIn="#DDDDDD",lineWidth=1)=>{
    let [w2,h2]=[w/2,h/2]
    let shape = new createjs.Shape();
    shape.graphics.ss(lineWidth)
    shape.graphics.s(colOut).f('#FFFFFF').dr(0,0,w,h);
    shape.graphics.s(colIn).dash([8,4]).moveTo(0,h2).lineTo(w,h2);
    shape.graphics.s(colIn).dash([8,4]).moveTo(w2,0).lineTo(w2,h);
    return shape;
}
//方格字形（内部无田字）
/**colOut边的颜色,colIn填充的颜色,lineWidth线宽  */
var moonRect=(w=50,h=50,colOut="#666666",colIn="#FFFFFF",lineWidth=1)=>{
    let shape = new createjs.Shape();
    shape.graphics.ss(lineWidth)
    shape.graphics.s(colOut).f(colIn).dr(0,0,w,h);
    return shape;
}
//拖拽形状
var moonDrag=(shape)=>{
    shape.addEventListener('mousedown',(e)=>{
        let x=e.localX;
        let y=e.localY;
        shape.parent.setChildIndex(shape,shape.parent.numChildren-1);
        shape.addEventListener('pressmove',(e)=>{
            shape.x=e.stageX-x;
            shape.y=e.stageY-y;
        })
        shape.addEventListener('mouseup',(e)=>{
            shape.removeEventListener('pressmove');
            shape.removeEventListener('mouseup');
        })
    });
}
var moonMouse=(container,enabled=true)=>{
    stage.enableMouseOver(30);//需要手动设置一个频率，才会定时检测rollover事件，和update一样,同理其他不能直接响应的鼠标事件。不过响应似乎有点慢。
    if(enabled){
        container.bg.cursor = "pointer";
        container.addEventListener("mouseover", ()=>{container.scale=1.05;});
        container.addEventListener("mouseout", ()=>{container.scale=1;});
        container.addEventListener("mousedown", ()=>{container.scale=0.95;});
        container.addEventListener("pressup", ()=>{container.scale=1;});
    }else{
        container.bg.cursor = null;
        container.removeAllEventListeners();
    }

}
//按钮
var moonButton=(w,h,r=0,label='按钮',color="#666666")=>{
    let container=new createjs.Container;
    container.width=w;container.height=h;
    let shape = new createjs.Shape();
    shape.graphics.f(color).rr(-w/2,-h/2,w,h,r);
    container.addChild(shape);
    container.bg=shape;
    moonMouse(container);
    container.bg=shape;
    if(label){
        let text=new createjs.Text(label, "16px Arial", "#fff");
        text.textAlign="center";
        container.text=text;
        text.y=-6;
        container.addChild(text);
    }
    container.setLabel=(label)=>{
        container.text.text=label;
    }
    return container;
}
var moonText=(text,size=16,color="#000")=>{
    let txt=new createjs.Text(text, `${size}px 黑体`, color);
    txt.textAlign="center";
    return txt;
}
var moonBoxText=(w,h,r=0,txt='文字',size=16,colorBg="#666666",colorTxt='#FFFFFF',isMouse=false)=>{
    let container=new createjs.Container;
    container.width=w;container.height=h;
    let shape = new createjs.Shape();
    shape.graphics.f(colorBg).rr(-w/2,-h/2,w,h,r);
    let text=moonText(txt,size,colorTxt);
    text.y=-size>>1;
    container.bg=shape;
    container.text=text;
    container.addChild(shape);
    container.addChild(text);
    container.setLabel=(label)=>{
        container.text.text=label;
    }
    if(isMouse){
        moonMouse(container);
    }
    return container;
}
/**绑定点击事件 单击或双击*/
var moonClick=(display,callBack,clickCnt=1)=>{
    display.addEventListener(clickCnt==1?'click':'dblclick',(e)=>{
        callBack(e);
    })
}
/**创建班级名字*/
var createClassName=()=>{
    let vals=['班级','_','姓名','_'];
    let nums=[50,100,200,250];
    let container=new createjs.Container;
    for(let i=0;i<vals.length;i++){
        let val=vals[i];
        let txt 
        if(val=='_') txt=moonRect(100,0.5,'#000');
        else         txt=new createjs.Text(val, `20px 黑体`, '#000');
        if(val=='_'){
            txt.y=25;
        }else{
            txt.y=3;
        }
        txt.x=nums[i];
        container.addChild(txt);
    }
    return container;
}